<?php
use common\components\extenders\MenuManage;
use \yii\helpers\Html;
?>
<style type="text/css">
    .table td, .table th{
        text-align: left;
    }
    input[type="radio"] {
        opacity: 0;
    }

    .myradio {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        padding: 0;
        width: 80px;
        height: 30px;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }
    .mrclose {
        background-color: #e8e8e8;
    }
    .mropen {
        background-color: #67e66c;
    }

    .myradio .open, .myradio .close {
        width: 28px;
        height: 28px;
        font-size: 14px;
        border-radius: 50%;
        background: #fff;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #e8e8e8;
    }

    .myradio .open {
        color: #fff;
        background-color: #fff;
    }

    .hidden {
        display: none
    }

    .disabled {
        pointer-events: none;
        cursor: default;
    }

    .myradio .close {
        left: auto;
        right: 0;
    }

    .myradio .open:after {
        content: '开启';
        position: absolute;
        top: 0;
        left: 38px;
        width: 30px;
        height: 30px;
        line-height: 28px;
    }

    .myradio .close:before {
        content: '关闭';
        position: absolute;
        top: 0;
        left: -38px;
        width: 30px;
        height: 30px;
        line-height: 28px;
    }
</style>
<?php echo \Yii::$app->view->renderFile('@app/views/layouts/header.php') ?>
<section class="content">
    <div class="box">
        <div class="box-header">
            <h3 class="box-title"></h3>
            <div class="box-tools">
                <?= (new MenuManage(MenuManage::TOOLBAR))->create() ?>
            </div>
        </div>
        <div class="box-body table-responsive no-padding">
            <table class="table table-hover">
                <tr>
                    <th><?=\Yii::t('zhtfrontend','编号');?></th>
                    <th style="text-align: left"><?=\Yii::t('zhtfrontend','菜单名称');?></th>
                    <th><?=\Yii::t('zhtfrontend','模块');?></th>
                    <th><?=\Yii::t('zhtfrontend','控制器');?></th>
                    <th><?=\Yii::t('zhtfrontend','方法');?></th>
                    <th><?=\Yii::t('zhtfrontend','参数');?></th>
                    <th><?=\Yii::t('zhtfrontend','显示方式');?></th>
                    <th><?=\Yii::t('zhtfrontend','应用规则');?></th>
                </tr>
                <?= $menu_str; ?>
            </table>
        </div>
    </div>
</section>
<?php
$url_sync = \common\components\helpers\Fun::url(['rule/assignmenu']);
$js = <<<JS
$.ajax({ 
    type : "post",  
    url : "$url_sync",  
    data : {ajax:'getexistpermission',rule_permission:"$rule_permission"},   
    success : function(data){
        var result = data.data;
        var btn;
        for(var i=0;i<result.length;i++){
            btn = 'radio_'+result[i];
            var iclose = $(":radio[name='"+btn+"']").parents(".myradio").find('.close');
            var iopen = $(":radio[name='"+btn+"']").parents(".myradio").find('.open');
            $(":radio[name='"+btn+"']").parents(".myradio").removeClass('mrclose').addClass('mropen');
            $(this).parents(".myradio").prev('span').html('<font style="color: #67e66c;">开启状态</font>：');
            iclose.animate({left:"0px"},100);
           
            setTimeout(function(){
                iclose.hide();
                iopen.show();
                iclose.css('left','50px');
                $(".myradio label").removeClass('disabled');
            },300);
        }
    },
    error:function(data){
        alert(JSON.stringify(data));
    }
});
$(".myradio input").click(function(e){
        var state = e.delegateTarget.defaultValue;
        var myradio = $(".myradio");
        var iclose = $(this).parents(".myradio").find('.close');
        // console.log(iclose);
        var iopen = $(this).parents(".myradio").find('.open');
        // console.log(state);
        $(this).parents(".myradio").find(':radio').removeAttr('checked');
        $(this).parent('label').addClass('disabled');
        $(this).parent('label').siblings('label').find(':radio').attr('checked',true);
         var name = $(this).attr('name');
         name = name.substr(name.lastIndexOf("_")+1);//获取id的值
          $.ajax({  
                 type : "post",  
                 url : "$url_sync",  
                 data : {id:name,ajax:'dosyncoper',type:state,rule_permission:"$rule_permission"},   
                 async: false,
                 success : function(data){
                     alert(data.content);
                     
                 },
                 error:function(data){
                      alert(JSON.stringify(data));
                  }
          });
          
          if (state == 'open') {
              $(this).parents(".myradio").removeClass('mropen').addClass('mrclose');
              open();//这个open是关闭的意思
          } else {//这里进行打开操作
              $(this).parents(".myradio").removeClass('mrclose').addClass('mropen');
              close();
          }
        

        function open(){
            iopen.animate({left:"50px"},100);
            setTimeout(function(){
                iopen.hide();
                iclose.show();
                iopen.css('left',0);
                $(".myradio label").removeClass('disabled');
            },300);
        }

        function close(){
            iclose.animate({left:"0px"},100);
           
            setTimeout(function(){
                iclose.hide();
                iopen.show();
                iclose.css('left','50px');
                $(".myradio label").removeClass('disabled');
            },300);
        }
    })
    
    $(":radio[name^='radio_']").click(function(){
       // alert('bb')
        var val = $(this).val();
        //alert(val);
//       var is_checked = $(this).is(':checked');
//       var val = $(this).val();

       
    });
    
    //这里呢要获取对应规则的对应显示来显示出来
JS;
$this->registerJS($js);
?>

